<template>
  <a class="btn" :class="className" @click="clickHandle">
    <slot>
      <i class="iconfont icon-export" v-if="download"></i>
      <i class="iconfont icon-up" v-if="sort"></i>
      <i class="iconfont icon-down" v-if="sort"></i>
      {{text}}
    </slot>
  </a>
</template>
<script>
export default {
  props: {
    text: String,
    download: Boolean,
    fill: Boolean,
    sort: Boolean,
    small: Boolean,
    state: Object,
    disabled: Boolean,
    notHover: Boolean
  },
  data() {
    return {
      _state: {},
      className: {}
    }
  },
  watch: {
    download() {
      this.getClassName()
    },
    fill() {
      this.getClassName()
    },
    sort() {
      this.getClassName()
    },
    small() {
      this.getClassName()
    },
    disabled() {
      this.getClassName()
    },
    state: {
      handler() {
        this._state = this.state
        this.getClassName()
      },
      deep: true

    }
  },
  methods: {
    clickHandle() {
      if (this.sort) {
        this._state.desc = !this._state.desc
        this.getClassName()
      }
      this.$emit('click', this._state)
    },
    getClassName() {
      let classes = {
        'btn-export': this.download,
        'btn-sort': this.sort,
        'btn-fill': this.fill,
        'btn-small': this.small,
        'not-hover': this.notHover,
        'disabled': this.disabled
      }
      if (this.sort && this._state.desc !== undefined) {
        classes.desc = this._state.desc
        classes.asc = !classes.desc
      }
      this.className = classes
    }
  },
  created() {
    this._state = this.state || {}
    this.getClassName()
  }
}
</script>




// WEBPACK FOOTER //
// src/components/button.vue